import React, { lazy } from "react";
import Home from "@/views/Home";
import Login from "@/views/Login";
// import About from "@/views/About";
const Page1 = lazy(() => import("@/views/HomePage"));
const UserList = lazy(() => import("@/views/UserList"));
const Admin = lazy(() => import("@/views/Admin"));
const House = lazy(() => import("@/views/House"));
const HouseApplication = lazy(() => import("@/views/HouseApplication"));

//Navigate重定向组件
import { Navigate } from "react-router-dom";

//懒加载的模式需要我们给他添加一个loading模式

const withLoadingComponent = (comp: JSX.Element) => (
  <React.Suspense fallback={<div>Loading</div>}>{comp}</React.Suspense>
);

const routes = [
  //嵌套路由  开始--------------
  {
    path: "/",
    element: <Navigate to={"/page1"} />,
  },
  {
    path: "/",
    element: <Home />,
    children: [
      {
        path: "/page1",
        element: withLoadingComponent(<Page1 />),
      },
      {
        path: "/userList",
        element: withLoadingComponent(<UserList />),
      },
      {
        path: "/admin",
        element: withLoadingComponent(<Admin />),
      },
      {
        path: "/house",
        element: withLoadingComponent(<House />),
      },
      {
        path: "/houseApplication",
        element: withLoadingComponent(<HouseApplication />),
      },
    ],
  },
  //嵌套路由  结束--------------
  {
    path: "/login",
    element: <Login />,
  },
  //访问其余路径的时候直接跳转到首页
  {
    path: "*",
    element: <Navigate to={"/page1"} />,
  },
];

export default routes;
